<template>
	<div id="list">
		<el-row>
			<el-col :span="5"><img src="../../../../public/images/img1.jpg" ></el-col>
			<el-col :span="13">
				<h3>上海发布新的不良资产处置文案</h3>
				<p>上海徐汇光大花园地处于徐汇黄金地段地段环境</p>
			</el-col>					
			<el-col :span="6"><router-link to="/detail">查看</router-link></el-col>
		</el-row>
		<el-row>
			<el-col :span="5"><img src="../../../../public/images/img1.jpg" ></el-col>
			<el-col :span="13">
				<h3>上海发布新的不良资产处置文案</h3>
				<p>上海徐汇光大花园地处于徐汇黄金地段地段环境</p>
			</el-col>					
			<el-col :span="6"><a href="javascript:;">查看</a></el-col>
		</el-row>
		<p class="more"><i class="iconfont">&#xe624;</i></p>
	</div>
</template>
<script>
	export default {
		name: "list"
	}
</script>
<style scoped lang="less" rel="stylesheet/less" type="text/css">
	@import '../../../../public/css/variable.less';	
	.el-row{
		border: 1px solid #e2e3e4;
		color: #afb2b6;
		.trans(0.3s);
		margin: 20px 0;
		.el-col{
			.fonts(13px);
			padding: 25px 25px 0;
			box-sizing: border-box;
			&:first-child{
				padding: 0;
			}
			img{
				width: 100%;
			}
			h3{
				.fonts(15px);
				color: #8f9397;
				padding-bottom: 20px;
				text-align: left;
				box-sizing: border-box;
			}
			a{
				display: block;
				margin: 0 auto;
				width: 100px;
				line-height: 30px;
				text-align: center;
				color: #d8b26a;
				border: 1px solid #d8b26a;
				.bdr(5px);
				.trans(0.3s);
				margin-top: 10px; 
				&:hover{
					background: @cgolden;
					color: @cw;
				}
			}
		}
		&:hover{
			border-color: @cgolden;
		}
	}
	.more{
		background: #efefef;
		cursor: pointer;
		height: 45px;
		line-height: 48px;
		text-align: center;
		color: #aaabae;
		.bdr(5px);
		.trans(.3s);
		i{ .fonts(30px); }
		&:hover{
			background: @cgolden;
			color: @cw;
		}
	}
</style>